<template>
    <div class="layout">
        <div class="layout-ceiling">
            <div class="container">
                <p class="fl">{{ welcomeMsg }}</p>
                <p class="fr">
                    <a v-if="isLogin" @click="onLogout()">退出</a>
                    <a v-else @click="visibleLogin = true">登录</a> | <a @click="visibleFeedback = true">反馈建议</a> | <a href="#">安全中心</a> |
                    <a href="#">服务大厅</a>
                </p>
            </div>
        </div>
        <div class="layout-header">
            <div class="container">
                <ul class="menu">
                    <li v-for="(item, index) in menuList" :key="index">
                        <NuxtLink :to="item.path">{{ item.name }}</NuxtLink>
                    </li>
                </ul>
            </div>
        </div>
        <Nuxt />
        <div class="layout-copy">
            <div class="container">
                <p>Copyright &copy; 2022 nuxt-study All Rights Reserved. 蜀ICP备xxxxxxx号-1</p>
            </div>
        </div>
        <LoginForm v-model="visibleLogin" />
        <Feedback v-model="visibleFeedback" />
    </div>
</template>

<script lang="ts">
import { Vue, Component } from 'vue-property-decorator'
@Component({})
export default class LayoutDefault extends Vue {
    get isLogin() {
        return this.$store.getters['user/isLogin']
    }

    welcomeMsg: string = '欢迎欢迎，热烈欢迎...'
    menuList = [
        { name: '首页', path: '/' },
        { name: '测试一', path: '/test1' },
        { name: '使用echarts', path: '/test2' },
    ]

    visibleLogin: boolean = false
    visibleFeedback: boolean = false

    onLogout() {
        this.$store.dispatch('user/logout')
    }
}
</script>
